<template>
    <div>
    <Particles></Particles> <!--粒子特效背景组件-->

    <div id="login">
<!--        <h1 style="position: absolute;color: #fff;left: 50%;-->
<!--            transform: translateX(-50%); top: -110px;">长沙-大计学院管理系统</h1>-->
<!--        <img src="../assets/logo_top.png" style="position: absolute;color: #fff;left: 50%;transform: translateX(-50%); top: -110px;"/>-->

        <el-form
                :model="userLoginForm"
                :rules="loginRules"
                status-icon
                ref="userLoginFormRef"
                label-position="left"
                label-width="0px"
                class="demo-ruleForm login-page"
        >

            <!--登录的图像-->
<!--            <div class="avatar_box">-->
<!--                <img src="../assets/20230111130430.png" style="width: 100%; height: 100%; border-radius: 50%; background-color: #EEE;">-->
<!--            </div>-->
            <div style="margin: 30px 0px 60px 0px;">
                <h3 class="title">系统登录</h3>
                <h5 style="margin: -20px 0px;color: #dddddd;font-weight: normal;">WELCOME TO LOGIN</h5>
            </div>

            <div style="margin-top: 0px;">

                <el-form-item prop="username" size="small">
                    <el-input
                            type="text"
                            @keyup.enter.native="handleSubmit"
                            v-model="userLoginForm.username"
                            auto-complete="off"
                            placeholder="用户名"
                            prefix-icon="iconfont el-icon-user"
                    ></el-input>
                </el-form-item>
                <el-form-item prop="password" size="small">
                    <el-input
                            type="password"
                            v-model="userLoginForm.password"
                            auto-complete="off"
                            placeholder="密码"
                            prefix-icon="el-icon-suitcase-1"
                    ></el-input>
                </el-form-item>
                <div style="display: flex">
                    <el-form-item prop="code" size="small">
                        <el-input
                                type="text"
                                v-model="userLoginForm.code"
                                placeholder="请输入验证码/点击图片获取"
                                @keyup.enter.native="handleSubmit"
                                style="width: 340px"
                        />

                    </el-form-item>
                    <!-- 验证码图片 -->
                    <img :src="captchaUrl" @click="updataCaptcha" style="float: right;height: 32px;margin-left: 10px"/>
                </div>

                <el-checkbox v-model="checked" class="rememberme" >记住密码</el-checkbox>
                <el-form-item style="width:100%;" size="small">
                    <div style="float:right;">
                        <el-button
                                type="primary"
                                class="el-icon-mobile-phone"
                                @click="handleSubmit"
                                :loading="loading"
                                round>登录
                        </el-button>
                        <el-button class="el-icon-refresh" @click="resetForm" round>重置</el-button>
                    </div>
                </el-form-item>
            </div>

        </el-form>

        <!-- 验证码 -->
        <Vcode
                :show="isShow"
                @success="success"
                @close="close"
                :canvasWidth="500"
                :canvasHeight="350"
        />
    </div>
    </div>
</template>

<script>
    import Vcode from "vue-puzzle-vcode";
    import Particles from '../components/particles/index'
    export default {
        data() {
            return {
                // 图片验证码
                captchaUrl: "http://localhost:8989/captcha?time=" + new Date(),
                isShow: false,
                dialogVisible: false,
                imgCode: undefined,
                //表单用户登入数据
                loading: false,
                userLoginForm: {
                    username: "admin",
                    password: "123456",
                    code: ''
                },
                checked: true,

                //验证规则
                loginRules: {
                    username: [
                        {required: true, message: "请输入用户名", trigger: "blur"},
                        {min: 3, max: 12, message: "长度在 3 到 12 个字符", trigger: "blur"}
                    ],
                    password: [
                        {required: true, message: "请输入用户密码", trigger: "blur"},
                        {min: 6, max: 15, message: "长度在 6 到 15 个字符", trigger: "blur"}
                    ],
                    code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
                },
            };
        },
        components: {
            Vcode,Particles
        },

        methods: {
            //点击图片重新获取
            updataCaptcha() {
                this.captchaUrl = "http://localhost:8989/captcha?time=" + new Date();
            },
            //登入提交
            handleSubmit: function () {
                this.$refs.userLoginFormRef.validate(valid => {
                    if (!valid) {
                        return;
                    } else {
                        this.isShow = true;
                    }
                });
            },
            //重置表单
            resetForm: function () {
                this.$refs.userLoginFormRef.resetFields();
            },
            //验证成功
            async success() {
                this.loading = true;
                //发起登入请求
                const {data: res} = await this.$http.post("system/user/login",this.userLoginForm);
                if (res.success) {
                    this.$message({
                        title: "登入成功",
                        message: "欢迎你进入系统",
                        type: "success"
                    });
                    LocalStorage.set(LOCAL_KEY_XINGUAN_ACCESS_TOKEN, res.data);
                    await this.getUserInfo();
                } else {
                    this.isShow = false;
                    this.$message.error({
                        title: "登入失败",
                        message: res.data.errorMsg,
                        type: "error"
                    });
                }
                this.loading = false;
            },

            /**
             获取用户信息
             */
            async getUserInfo() {
                const {data: res} = await this.$http.get("system/user/info");
                if (!res.success) {
                    return this.$message.error("获取用户信息失败:" + res.data.errorMsg);
                } else {
                    this.userInfo = res.data;
                    this.$store.commit("setUserInfo", res.data);
                    await this.$router.push("/home");
                }
            },

            close() {
                this.isShow = false;
            }
        },
        created() {
        }
    };
</script>

<style scoped>
    .title {
        text-align: left;
    }
    .avatar_box {
        width: 100px;
        height: 100px;
        border: 1px solid #EEEEEE;
        border-radius: 50%;
        padding: 10px;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
        margin: -85px auto;
        background-color: #FFFFFF;
    }
    .login-container {
        width: 100%;
        height: 100%;

    }

    #login {
        position: relative;
    }


    /*.login-page {*/
    /*    position: relative;*/
    /*    -webkit-border-radius: 5px;*/
    /*    border-radius: 5px;*/
    /*    margin: 190px auto;*/
    /*    width: 430px;*/
    /*    padding: 0px 35px 15px;*/
    /*    background: #fff;*/
    /*    border: 1px solid #eaeaea;*/
    /*}*/
    .login-page {
        position: relative;
        border-radius: 8px;
        margin: 190px auto;
        width: 430px;
        height: 384px;
        padding: 1px 35px 15px 330px;
        background: #fff url("../assets/pic_login_left.png") no-repeat;
    }
    label.el-checkbox.rememberme {
        margin: 0px 0px 15px;
        text-align: left;
    }
    #login > form > div:nth-child(2) > div:nth-child(5) > div {
        display: flex;
    }
    #login > form > div:nth-child(2) > div:nth-child(5) > div > div > input{
        /*width: 280px;*/
    }

</style>


